<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js过渡&动画</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        /*用于databinding3的CSS动画*/
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
<!--通过点击按钮将变量show的值从true变为false-->
    <div id="databinding">
        <button v-on:click="show=!show">点击我</button>
        <transition name="fade">
            <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
        </transition>
    </div>
    <script type = "text/javascript">
        var vm = new Vue({
            el:'#databinding',
            data:{
                show:true,
                styleobj:{
                    fontSize:'30px',
                    color:'red'
                }
            },
            methods:{

            }
        })
    </script>


<!--CSS过渡-->
    <div id="databinding2">
        <button v-on:click="show = !show">点击我</button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#databinding2',
            data:{
                show:true
            }
        })
    </script>

<!--CSS动画-->
    <div id="databinding3">
        <button v-on:click="show = !show">点击我</button>
        <transition name="bounce">
            <p v-if="show">人是需要精神的</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#databinding3',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>